<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 

        documne.write()
            输出流 如果当前网页和document.write的输出在同一个流，那么就会按顺序先后输出
                如果不在同一个输出流，namedocument.write 全部覆盖前面的输出内容
     -->

    <div></div>
    <div id="nodeText"></div>
    <div id="nodetest"></div>
    <script>

        //字符串拼接html， 字符串最差，字符串拼接 和 赋值有一个资源占用(每次字符串)
        console.time('forinsertHTML');
        var str=''
        for(var i=0;i<1000;i++)
        {
            str+='<p>段落'+i+'</p>'
        }
        document.querySelector("div").innerHTML=str
        console.timeEnd('forinsertHTML');


        //数组储存字符串，字符串在合并  性能最高
        console.time("arrinsertHTML")
        var htmlArr=[]
        for(var i=0;i<1000;i++)
        {
            htmlArr.push('<p>段落'+i+'</p>')
        }
        var HTMLstr=htmlArr.join('')
        document.getElementById("nodeText").innerHTML=HTMLstr;
        console.timeEnd('arrinsertHTML');


        //用node来创建结点，性能好，灵活性高，碎片化(不断创建新的结点对象) 优点：操作比较灵活
        console.time('nodeInsert');
        var nodetest=document.getElementById("nodetest")
        for(var i=0;i<1000;i++)
        {
            var p=document.createElement('p')
            var textp=document.createTextNode('段落'+i)
            p.appendChild(textp)
            nodetest.appendChild(p)
        }
        console.timeEnd('nodeInsert');

        
    </script>
    
</body>
</html>